<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="订单详情" :border-bottom="false"></u-navbar>
		</view>
		<view class="status container_br" v-if="order">
			<view class="title">
				<span v-if="order.status==2">待收货</span>
				<span v-if="order.status==0">待付款</span>
				<span v-if="order.status==1">待发货</span>
				<span v-if="order.status==3">已完成</span>
				<span v-if="order.status==4">退款中</span>
				<span v-if="order.status==5">退款完成</span>
				<span v-if="order.status==-1">已取消</span>
				<span v-if="order.status==-2">拒绝退款</span>
			</view>
			<view class="address">
				收获地址信息
			</view>
			<view class="userInfo">
				收货人：{{order.delivery.contact_person}} {{order.delivery.contact_phone}}
			</view>
			<view class="adress">
				{{order.delivery.address}}
			</view>
		</view>
		<view class="goodsInfo container_br">
			<view class="title">
				商品信息
			</view>
			<view class="goods" v-for="(c,index) in order.goods" :key="index">
				<view class="top jsbc">
					<view class="left">
						<image :src="c.goods_images_format[0]" mode="widthFix" style="width: 150rpx;"></image>
					</view>
					<view class="right">
						<view class="name">
							{{c.goods_name}}
						</view>
						<view class="type_num jsbc">
							<view class="type">
								{{c.goods_category}}
							</view>
							<view class="num">
								X{{c.goods_number}}
							</view>
						</view>
						<view class="price">
							￥{{c.goods_price}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="totalPrice jsbc">
						<view class="priceTitle">
							商品总价
						</view>
						<view class="price">
							￥{{order.total_amount}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="orderDetail container_br" v-if="order.delivery">
			<view class="title">
				订单信息
			</view>
			<view class="cell">
				订单编号：{{order.order_no}}
			</view>
			<view class="cell">
				下单时间：{{order.created_at}}
			</view>
			<view class="cell">
				下单备注：{{order.remark?`${order.remark}`:"无"}}
			</view>
			<view class="cell" v-if="order.delivery.support_express_name">
				快递公司：{{order.delivery.support_express_name}}
			</view>
			<view class="cell flc" v-if="order.delivery.support_express_number">
				<span>快递单号：{{order.delivery.support_express_number}}</span>
				<u-icon class="ml2" name="bookmark" size="32" color="#333" @click="copyOrder(order.delivery.support_express_number)"></u-icon>
			</view>
		</view>
		<view class="btns">
			<view class="btn">
				查看详情
			</view>
			<view class="btn pay" v-if="order.status==0" @click.stop="goPay(order)">
				立即支付
			</view>
			<view class="btn cancel" v-if="order.status==0" @click.stop="cancelBtn(order.id)">
				取消订单
			</view>
			<view class="btn relation" v-if="order.status==1||order.status==2"
				@click.stop="refund(order)">
				申请退款
			</view>
			<view class="btn pay" v-if="order.status==2" @click.stop="submitOrder(order.id)">
				确认收货
			</view>
			<view class="btn pay" v-if="order.status==3&&order.goods[0].is_appraise==0" @click.stop="openPj(order)">
				评价
			</view>
			<view class="btn" v-if="order.status==3&&order.goods[0].is_appraise==1" >
				已评价
			</view>
		</view>
		<u-popup v-model="showPj" mode="bottom" border-radius="20">
			<view class="popShow">
				<u-icon size="32" name="close" color="#666" class="close" @click="()=>this.showPj = false"></u-icon>
				<view class="top">
					<span class="fbpl">发表评价</span>
				</view>
				<view class="rating">
					<span>商品评价</span>
					<u-rate :count="count" v-model="rateNumber" @change="valChange" active-color="#F5CE31FF"
						inactive-color="#b2b2b2" gutter="20" size="50" style="margin: 0 20rpx;"></u-rate>
					<span v-if="rateCt==1">特别差</span>
					<span v-if="rateCt==2">差</span>
					<span v-if="rateCt==3">一般</span>
					<span v-if="rateCt==4">好</span>
					<span v-if="rateCt==5">非常好</span>
				</view>
				<view class="context">
					<view class="title">
						评论内容<span style="color: #999;">(至少15字以上)</span>
					</view>
					<textarea class="textCt" placeholder="商品满足您的期待吗？说说它的优点和美中不足吧。" v-model="content" />
				</view>
				<view class="uploadTp">
					<view class="title">
						图片<span>({{upload.length}}/3)</span>
					</view>
					<view class="upload">
						<view class="item" v-for="(item,index) in pic" :key="index">
							<image :src="item" mode="widthFix" style="width: 200rpx;"></image>
							<u-icon size="28" :name="'/static/icon/del.png'" class="deleteTp"
								@click.stop="deleteTp(index)"></u-icon>
						</view>
						<view class="addPic item" @click="uploadTp" v-if="upload.length<3">
							<image src="../../static/img/upload.png" mode="widthFix" style="width: 200rpx;"></image>
						</view>
					</view>
				</view>
				<view class="submitRate" @click="sendMessage">
					提交评价
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		cancelOrder,
		commitOrder,
		confirmOrder
	} from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		toast,
		tiao,
		toastC,
		toastload,
		closeload,
		copy
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				order_number: "",
				order: "",
				showPj: false,
				count: 5,
				rateNumber: 3,
				content: "",
				upload: [],
				rateCt: 3,
				goods_id: "",
				pic: []

			};
		},
		onLoad(res) {
			this.order_number = res.order_number
			this.init()
		},
		methods: {
			init() {
				toastload()
				getOrderDetail(this.order_number).then(res => {
					closeload()
					console.log("订单详情", res);
					this.order = res.data
				})
			},
			cancelBtn(id) {
				toastload()
				cancelOrder({
					order_id:id
				}).then(res => {
					if (res.code == 200) {
						toast("取消成功")
						setTimeout(() => {
							this.init()
						}, 500)
					}
					closeload()
				})
			},
			pay(item) {
				let info = {
					order_no: item.order_number,
					money: item.price_count,
					status: 0,
				}
				setTimeout(() => {
					tiao('/page/payment/payment', info)
				}, 500)
			},
			openPj(item) {
				this.goods_id = item.goods[0].id
				console.log(item);
				console.log(this.goods_id);
				this.showPj = true
			},
			sendMessage() {
				if (!this.content) {
					toast("请勿发送空信息")
					return
				}
				let obj = {
					images: this.upload,
					content: this.content,
					goods_star: this.rateCt,
					order_goods_id: this.goods_id
				}
				console.log(obj);
				toastload()
				commitOrder(obj).then(res => {
					if (res.code == 200) {
						toastC("评价成功")
						setTimeout(() => {
							this.init()
						}, 500)
					}
					closeload()
				})
				this.showPj = false
			
			},
			valChange(e) {
				console.log(e);
				this.rateCt = e
			},
			cancelBtn(id) {
				toastload()
				cancelOrder({
					order_id:id
				}).then(res => {
					if (res.code == 200) {
						toast("取消成功")
						setTimeout(() => {
							this.init()
						}, 500)
					}
					closeload()
				})
			},
			deleteTp(index) {
				this.upload.splice(index, 1)
				this.pic.splice(index, 1)
			},
			uploadTp() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						uni.uploadFile({
							url: baseUrl.baseUrl + 'public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									if (data.data) {
										console.log("开始修改");
										self.pic.push(baseUrl.base + '/uploads/' + data.data);
										self.upload.push(data.data)
									}
									uni.hideLoading();
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						})
					}
				});
			
			},
			copyOrder(order){
				copy(order)
			},
			goPay(item) {
				let info = {
					order_no: item.order_no,
					money: item.total_amount,
				}
				setTimeout(() => {
					uni.redirectTo({
						url: '/page/payment/payment?order_no=' +
							item.order_no + '&money=' + item.total_amount
					});
				}, 500)
			},
			// 申请退款
			refund(item) {
				tiao('/page/refundPrice/refundPrice?id=' + item.id)
			},
			submitOrder(id) {
				let self = this
				uni.showModal({
					title: '是否确认收货',
					success(res) {
						if (res.confirm) {
							confirmOrder({
								order_id: id
							}).then(res => {
								if (res.code == 200) {
									toastC("确认收货成功")
									setTimeout(() => {
										self.init()
									})
								}
							})
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.status{
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
		.title{
			font-size: 42rpx;
			color: #333333;
			margin-bottom: 15rpx;
		}
		
	}
	.goodsInfo {
		.title{
			font-size: 30rpx;
			color: #333333;
		}
		.goods{
			margin-top: 2orpx;
			.left{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}
			.right{
				width: 480rpx;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.right .type_num {
				font-size: 26rpx;
				color: #999999;
			}
			
			.right .price {
				font-size: 30rpx;
				color: #FA453C;
			}
			.bottom{
				padding: 15rpx 0;
				border-top: 1rpx solid #dedede;
				margin-top: 20rpx;
			}
		}
	}
	.orderDetail{
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
	}
	
	
	.btns {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		width: 750rpx;
		padding: 15rpx 0;
		border-top: 1rpx solid #dedede;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.btns .btn {
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border: 1px solid #E6E6E6;
		text-align: center;
		line-height: 60rpx;
		margin: 0 10rpx;
	}

	.btns .pay {
		background: #f5ce31;
		color: #FFFFFF;
	}

	.btns .cancel,
	.btns .relation,
	.btns .detail {
		font-size: 28rpx;
		color: #666666;
	}

	.btns .cui {
		border: 1px solid #f5ce31;
		color: #f5ce31;
	}
	
	.popShow {
		width: 750rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
	
		.close {
			position: absolute;
			top: 58rpx;
			left: 20rpx;
		}
	
		.top {
			padding: 20rpx;
			border-bottom: 1rpx solid #dedede;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
	
		}
	
		.rating {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;
		}
	
		.context {
			padding: 20rpx 0;
	
			.title {
				margin: 20rpx 0;
			}
	
			.textCt {
				width: 710rpx;
				height: 120rpx;
			}
		}
	
		.uploadTp {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #dedede;
	
			.title {
				margin: 10rpx 0;
			}
	
			.upload {
				display: flex;
				align-items: center;
			}
	
			.item {
				width: 200rpx;
				height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
				position: relative;
			}
	
			.item .deleteTp {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
	
		.submitRate {
			text-align: center;
			width: 690rpx;
			height: 80rpx;
			background: #F5CE31;
			border-radius: 40rpx;
			line-height: 80rpx;
			margin: 30rpx auto;
			color: #333333;
		}
	}
	
</style>